<template>
  <div class="camera">
    <activate-header></activate-header>
    <upload-img
      :ocr="true"
      :idCardSide="IDCardSide.FRONT"
      @update:modelValue="handleUpdate"
      :max-count="1"
      ref="imgFrontRef"
    >
      <template #default>
        <van-image :src="cardFrontImg" width="160"> </van-image>
      </template>
      <template #file-list>
        <van-image :src="cardBackImg" width="160"></van-image>
      </template>
    </upload-img>
    <upload-img
      :ocr="true"
      :idCardSide="IDCardSide.BACK"
      @update:modelValue="handleUpdate"
      :max-count="1"
      ref="imgFrontRef2"
    >
      <template #default>
        <van-image :src="cardBackImg" width="160"> </van-image>
      </template>
    </upload-img>
    <div>{{ formDataFront.realname || "+++" }}</div>
    <div v-for="(item, index) in imgArrs" :key="index" class="region card">
      <div class="card-text">{{ item.text }}</div>
      <van-image :src="item.img" width="160"></van-image>
    </div>
    <div class="region footer">
      <div class="tip-text">
        温馨提示: 请上传本人身份证照片，非本人信息无法通过审核。
        确保证件边框完整，文字清晰可见；<br />

        <!-- 可现场拍摄或从手机相册获取。 -->
      </div>
      <!-- <div class="footer-empty"></div> -->
      <van-button
        round
        block
        type="primary"
        native-type="submit"
        color="#FD2F70"
        class="footer-btn"
        @click="onClick"
        >下一步</van-button
      >
      <div class="arrow">
        没带身份证？点此输入身份证号码
        <van-image
          :src="arrowImg"
          height="12"
          class="arrow-img"
          @click="goBack"
        ></van-image>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import activateHeader from "./modules/activateHeader.vue";
import { ref, reactive, onMounted, watch } from "vue";
import { useUserStroe } from "@/pinia/modules/main";
import { submitInfo, getBlackList, getAuthRisk } from "@/api/authentication";
import { showToast } from "vant";
import { useRouter, useRoute } from "vue-router";
import cardBackImg from "@/assets/cardBack.png";
import cardFrontImg from "@/assets/cardFront.png";
import arrowImg from "@/assets/arrow-right.png";
import uploadImg from "@/components/UploadImg/index.vue";
import { IDCardSide } from "@/const/emun";

const imgFrontRef = ref();
const urlImgFront = ref("");
const router = useRouter();
const userStore = useUserStroe();

const formDataFront: any = reactive({});
const formDataBack: any = reactive({});

const imgArrs = ref([
  { img: cardBackImg, text: "人像面", side: IDCardSide.FRONT },
  { img: cardFrontImg, text: "国徽面", side: IDCardSide.BACK },
]);

onMounted(() => {
  console.log("camera: ", userStore.token);
  console.log("camera phone", userStore.userInfo.phone);
});
const goBack = () => {
  console.log("-----", router);
  router.push("/AuthPage");
};

const onClick = async () => {
  console.log("front data", formDataFront);
};

const handleUpdate = (side: IDCardSide, val: any) => {
  // console.log(val);
  if (side == IDCardSide.FRONT) {
    Object.assign(formDataFront, val);
  }
  if (side == IDCardSide.BACK) {
    Object.assign(formDataBack, val);
  }
};
</script>
<style lang="scss" scoped>
.camera {
  background-color: #f6f6f6;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  .card {
    padding: 16px 10px;
    background-color: #fff;
    // box-shadow: ;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &-text {
      font-weight: 600;
      font-size: 16px;
      color: #333;
      flex: 1;
      text-align: center;
    }
    // &-
  }
  .region {
    margin: 0 18px;
    margin-top: 10px;
  }
  .footer {
    flex: 1;
    display: flex;
    flex-direction: column;
    .tip-text {
      line-height: 1.5;
      margin-top: 10px;
      flex: 1;
      color: $text-color-grey;
      font-size: 12px;
    }
    &-btn {
      margin-bottom: 10px;
    }
    .arrow {
      // text-align: center;
      color: $text-color-grey;
      line-height: 2;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      .arrow-img {
        vertical-align: middle;
        margin-left: 8px;
      }
    }
  }
}
</style>
